import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import { registerMicroApps, start } from 'qiankun'

/**
 * 主应用入口文件
 * @description 初始化Vue应用并注册微应用
 */

// 创建Vue应用实例
const app = createApp(App)

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/react-app:all(.*)*',
      name: 'ReactApp',
      component: { render: () => null }
    },
    {
      path: '/vue-app:all(.*)*',
      name: 'VueApp',
      component: { render: () => null }
    }
  ]
})

// 注册微应用
registerMicroApps([
  {
    name: 'react-app', // 微应用名称
    entry: 'http://localhost:3000', // 微应用入口
    container: '#react-container', // 微应用挂载的DOM节点
    activeRule: '/react-app', // 微应用激活规则
    props: {
      // 传递给微应用的数据
      mainAppData: '来自主应用的数据'
    }
  },
  {
    name: 'vue-app', // 微应用名称
    entry: 'http://localhost:3001', // 微应用入口
    container: '#vue-container', // 微应用挂载的DOM节点
    activeRule: '/vue-app', // 微应用激活规则
    props: {
      // 传递给微应用的数据
      mainAppData: '来自主应用的数据'
    }
  }
])

// 启动qiankun
start({
  prefetch: true, // 预加载微应用
  sandbox: {
    strictStyleIsolation: true, // 严格的样式隔离
    experimentalStyleIsolation: true // 实验性的样式隔离
  }
})

// 使用插件
app.use(router)
app.use(ElementPlus)

// 挂载应用
app.mount('#app') 